  <link rel="stylesheet" href="${createLinkTo(dir: 'css', file: 'popupList.css')}"/>
  <g:javascript>
    $(function() {
	$(".stagePopup").click(function() {
        $(this).addClass('focous');
        var stagePos = $(this).position();
        var stageTopOffset = -300;
        var stageLeftOffset = +40;
        $("#stageList").css("top",stagePos.top+stageTopOffset);
        $("#stageList").css("left",stagePos.left+stageLeftOffset);
		displayStage();
	});

	$(".preHeader").load("${createLink(controller: 'stage', action: 'stage')}")
	.end().find(".header").load("${createLink(controller: 'stage', action: 'month', id:'S0')}");
    });

    function displayStage() {
        $("#stageList .content")
        .html("<div style='text-align:center;padding:20px 0;color:#999999'><img src='${createLinkTo(dir: 'images', file: 'ajax-loader.gif')}' style='padding-bottom:5px'><br/>正在加载...</div>")
        .load("${createLink(controller: 'stage', action: 'week')}" + "/" +$("#stageList .header .selectedItem").attr("id"));
        $("#stageList").hide();
        $("#stageList").show();
    }
    function updateStageMonth(cid) {
        if (cid!="" && cid!=undefined) {
            var popupList = $(".popupList:visible").attr("id");
            //clear content html first
            $("#"+popupList+" .content").html("<div style='text-align:center;padding:20px 0;color:#999999'><img src='${createLinkTo(dir: 'images', file: 'ajax-loader.gif')}' style='padding-bottom:5px'><br/>正在加载...</div>");
            //update selecteItem
            $("#"+popupList+" .preHeader .selected").removeClass("selected")
            .end().find("#"+popupList+" .preHeader #"+cid).addClass("selected");
            $("#"+popupList+" .header")
            .load("${createLink(controller: 'stage', action: 'month')}" + "/" +cid,{},function() {
                    updateStageWeek($("#"+popupList+" .header li:first").attr("id"));
            });
        }
    }

    function updateStageWeek(pid) {
        if (pid!="" && pid!=undefined) {
            //update selectedItem
            $("#stageList .header .selectedItem").removeClass("selectedItem").end().find("#stageList .header #"+pid).addClass("selectedItem");

            if (pid=="") {
                pid=1;	//set default to handle unexpected case
            }
            $("#stageList .content")
            .html("<div style='text-align:center;padding:20px 0;color:#999999'><img src='${createLinkTo(dir: 'images', file: 'ajax-loader.gif')}' style='padding-bottom:5px'><br/>正在加载...</div>")
            .load("${createLink(controller: 'stage', action: 'week')}" + "/" +pid);
        } else {
            //clear the content
            $("#stageList .content").html("<div style='font-style:normal;color:#666666;padding:20px;text-align:center'>no school</div>");
        }
    }

    function fillStage(s) {
        $(".focous").val(s);
        $(".focous + span").html($(".header ul li[class='selectedItem'] a").html()+" "+$("#stageList .content ul #"+s).html());     
        $(".focous").removeClass("focous")
        $("#stageList").hide();
    }

  </g:javascript>